<script setup>
import members from '@/assets/data/members'
</script>

<template>
  <div style="background-color: #f4f6f9">
    <div class="wrapper">
      <!-- 企业文化 -->
      <div class="culture">
        <h1>企业文化</h1>
        <div class="content">
          <p>诚信：正直坦诚、勇于担当、信守承诺</p>
          <p>团队：以为为本、互信合作、大局为重</p>
          <p>激情：只做第一、享受工作、永不放弃</p>
          <p>创新：不断改进、持续学习、包容失败</p>
        </div>
      </div>
      <!-- 管理团队 -->
      <div class="team">
        <h1>管理团队</h1>
        <div class="container">
          <Zmember
            v-for="item in members"
            :key="item.id"
            :info="item"
          ></Zmember>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.wrapper {
  & > div {
    padding-bottom: 20px;
    h1 {
      text-align: center;
      margin: 20px 0;
    }
    p {
      display: block;
      margin-bottom: 10px;
      font-size: 18px;
      line-height: 1.5;
    }
  }

  .culture {
    .content {
      background: url('@/public/about/企业文化.jpg') no-repeat right center;
      background-size: cover;
      color: #fff;
      padding: 100px 0;
      p {
        padding-right: 150px;
        font-size: 24px;
        color: #333;
        text-align: right;
      }
    }
  }

  .team {
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 20px;
    }
  }
}
</style>
